<template>
  <div>
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      width="750px"
      @close="onClose"
    >
      <el-row :gutter="15">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-col :span="24">
            <el-form-item label="上级城市" prop="parent">
              <el-cascader
                v-model="formData.parent"
                :options="parentIdOptions"
                :props="parentIdProps"
                :style="{ width: '100%' }"
                placeholder="请选择上级城市"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="城市名称" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请输入城市名称"
                :maxlength="50"
                show-word-limit
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="城市编码" prop="code">
              <el-input
                v-model="formData.code"
                placeholder="请输入城市编码"
                :maxlength="30"
                show-word-limit
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude">
              <el-input
                v-model="formData.longitude"
                placeholder="请输入经度"
                :maxlength="30"
                show-word-limit
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维度" prop="dimension">
              <el-input
                v-model="formData.dimension"
                placeholder="请输入维度"
                :maxlength="30"
                show-word-limit
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="滑块" prop="sort" required>
              <el-slider
                v-model="formData.sort"
                :min="1"
                :max="1000"
                :step="1"
                show-input
              ></el-slider>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { getList, add, update } from '@/api/sys/city'
  import { changeTree } from '@/utils/treeTool'
  import { deepClone } from '@/utils/index'
  export default {
    props: [],
    data() {
      return {
        dialog: {
          title: '添加城市',
          visible: false,
        },
        formData: {
          id: '0',
          parent: [],
          name: undefined,
          code: undefined,
          longitude: undefined,
          dimension: undefined,
          sort: 1,
        },
        rules: {
          parent: [
            {
              required: true,
              type: 'array',
              message: '请至少选择一个上级城市',
              trigger: 'change',
            },
          ],
          name: [
            {
              required: true,
              message: '请输入城市名称',
              trigger: 'blur',
            },
          ],
          code: [
            {
              required: true,
              message: '请输入城市编码',
              trigger: 'blur',
            },
          ],
          dimension: [],
        },
        parentIdOptions: [],
        parentIdProps: {
          multiple: false,
          checkStrictly: true,
          expandTrigger: 'hover',
        },
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      onClose() {
        this.dialog.visible = false
        this.formData = {
          id: '0',
          parent: [],
          name: undefined,
          code: undefined,
          longitude: undefined,
          dimension: undefined,
          sort: 1,
        }
        this.$refs['elForm'].resetFields()
      },
      close() {
        this.dialog.visible = false
        this.$emit('update:visible', false)
      },
      handleAdd() {
        this.formData.id = '0'
        this.dialog.title = '添加城市'
        this.dialog.visible = true
        this.initTree()
      },
      handelModify(record) {
        this.initTree()
        this.tempModel = record
        record.parent = []
        var str = record.parentGroup.split(',')
        str.forEach(function (item, i) {
          if (item != record.id && item) {
            record.parent.push(item)
          }
          if (record.parentId == '0' && item) {
            record.parent.push('0')
          }
        })
        this.dialog.title = '编辑城市'
        this.dialog.visible = true
        this.formData = deepClone(record)
      },
      handelConfirm() {
        this.$refs['elForm'].validate(async (valid) => {
          if (!valid) return
          const _parentList = this.formData.parent.join(',')
          this.formData.parentId = this.formData.parent.pop()
          this.formData.parentGroup = _parentList
          var _this = this
          let tipName = '添加成功'
          let res = null
          if (this.formData.id == '0') {
            this.formData.id = ''
            res = await add(this.formData)
          } else {
            tipName = '修改成功'
            res = await update(this.formData)
          }
          if (res.code == 200) {
            this.close()
            this.$emit('complete')
            this.$notify({
              message: tipName,
              type: 'success',
            })
          } else {
            this.$notify({
              message: message,
              type: 'error',
            })
          }
          this.close()
        })
      },
      async initTree() {
        const t = await getList()
        let _tree = [{ id: '1', value: '0', label: '根目录', parentId: '0' }]
        t.data.some((m) => {
          _tree.push({
            id: m.id,
            value: m.id,
            label: m.name,
            parentId: m.parentId,
          })
        })
        this.parentIdOptions = changeTree(_tree)
      },
    },
  }
</script>
<style></style>
